<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>联系客服</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/reception/chat.css">
    <!-- 引入 bootstrap的 css -->
    <link type="text/css" rel="stylesheet" th:href="@{plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css}"/>
    <!-- 引入 jquery 框架，需要第一个引入，因为其他的js会使用该框架 -->
    <script type="text/javascript" th:src="@{plugins/jquery-3.6.0/jquery-3.6.0.min.js}"></script>
    <!-- 引入 bootstrap的js -->
    <script type="text/javascript" th:src="@{plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js}"></script>
    <!-- 引入分页插件pagination的css样式文件 -->
    <link type="text/css" rel="stylesheet" th:href="@{plugins/pagination-2.1.5/css/pagination.css}">
    <!-- 引入假分页控件pagination的js -->
    <script type="text/javascript" th:src="@{plugins/pagination-2.1.5/js/pagination.min.js}"></script>
    <!-- 引入自己写的js -->
    <script type="text/javascript" th:src="@{js/reception/chat.js}"></script>
</head>
<body>
<!-- 顶部开始 -->
<div class="top">
    <div class="header">
        <div class="top-left">
            <font size="4px" color="red">欢迎来到稻香商城!</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#">加入我们</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#">帮助中心</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="jump?pg=reception/chat">联系客服</a>&nbsp;&nbsp;&nbsp;&nbsp;
        </div>
        <div class="top_right">
            <a href="jump?pg=reception/index">首页</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <span id="loginUser" hidden="hidden" th:text="${session.loginUser==null?'':session.loginUser.getNickname()}"></span>
            <a href="jump?pg=reception/login" id="sessionName"></a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="jump?pg=reception/register">免费注册</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#">我的订单</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a target="_blank" id="shoppingCar">购物车<img src="/img/gowuchetubiao.png"></a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#">会员中心</a>
        </div>
    </div>
</div>
<div class="work">
    <div class="header_1">
        <img src="/img/dingbu.jpg" width="100%" height="100%">
    </div>
</div>
<!--顶部结束 -->
<hr size="1" color="#000" style="height: 2px"/>
<div class="outer">
    <!-- 用户列表显示区 -->
    <div class="left">
        <div>好友列表</div>
        <ul id="userlist">
            <!--        <li><a onclick="showChat('张三')">张三</a></li>-->
            <!--        <li><a onclick="showChat('李四')">李四</a></li>-->
        </ul>
    </div>
    <div class="right">
        <!-- 显示正在和谁聊天 -->
        <div id="chatMes">正在</div>

        <!-- 聊天消息显示区 -->
        <div id="message" class="container row pre-scrollable">
            asdasda<br/>asdasda<br/>asdasda<br/>asdasda<br/>asdasda<br/>asdasda<br/>
        </div>

        <div class="footer">
            <input type="text" id="text">
            <button onclick="send()">Send</button>
            <button onclick="closeWebSocket()">Close</button>
        </div>
    </div>
</div>
</body>
</html>